<template>
  <div id="setbanner">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>页头类型</legend>
      <div class="layui-field-box">
        <el-radio-group v-model="radio" @change="changetype">
          <el-radio-button label="背景+文字"></el-radio-button>
          <el-radio-button label="使用图片"></el-radio-button>
        </el-radio-group>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>上传LOGO</legend>
      <div class="logobox">
        <img :src="themeConfig.LogoSrc" alt="">
      </div>
      <el-button id="uploaderlogo" type="primary">点击上传</el-button>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>选择背景</legend>
      <div class="theme" :style="{backgroundImage: backimg}"></div>
      <p class="note"  v-if="pageConfig.theme=='default'">提示：请上传1920*530或同比例背景图，图片小于2M</p>
       <p class="note"  v-if="pageConfig.theme=='tradition'">提示：请上传1100*252或同比例背景图，图片小于2M</p>
      <el-button id="uploader" type="primary">点击上传</el-button>
      <el-button @click="chosebg(true)">从图库选择</el-button>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>字体颜色</legend>
      <div class="layui-field-box">
        <el-color-picker v-model="color1" @change="changefc"></el-color-picker>
      </div>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
    <transition name="fade">
      <div class="callsponsor" v-show="choseback">
        <transition name="move">
          <div class="box" v-show="choseback">
            <p>图库</p>
            <i class="el-message-box__close el-icon-close close" @click="chosebg(false)"></i>
            <div class="content">
              <ul>
                <li class="bgimg" v-for="(img,index) in imgList" :key="img" :style="{backgroundImage: tourl[index]}" @click="handlebg(img)">
                  <div class="cover" v-show="img == chosenimg">
                    <i class="el-icon-check"></i>
                    当前选择
                  </div>
                </li>
              </ul>
            </div>
            <div class="bottombox">
              <el-button @click="chosebg(false)">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // props: ["bandata"],
    data: function () {
      return {
        radio: this.$store.state.pageConfig[this.$store.state.pageConfig.theme].type == 1 ? "背景+文字" : "使用图片",
        color1: this.$store.state.pageConfig[this.$store.state.pageConfig.theme].fontcolor,
        chosenimg: "",
        upimg: this.$store.state.pageConfig[this.$store.state.pageConfig.theme].uploadimg,
        fileList: [],
        choseback: false,
        imgList: [
          "/Areas/Template/Content/Design/images/bg001.jpg",
          "/Areas/Template/Content/Design/images/bg002.jpg",
          "/Areas/Template/Content/Design/images/bg003.jpg",
          "/Areas/Template/Content/Design/images/bg004.jpg",
          "/Areas/Template/Content/Design/images/bg005.jpg"
        ]
      }
    },
    mounted() {
      var that = this;
      window.fileUploader.create("#uploader", {
        callback: function (dataUrls) {
          that.setThemeConfig({
            theme: that.themeName,
            key: 'background',
            value: dataUrls[0]
          });
          that.setThemeConfig({
            theme: that.themeName,
            key: 'uploadimg',
            value: dataUrls[0]
          })
          that.upimg = dataUrls[0];
        }
      });
      window.fileUploader.create("#uploaderlogo", {
        callback: function (dataUrls) {
          that.setThemeConfig({
            theme: that.themeName,
            key: 'LogoSrc',
            value: dataUrls[0]
          })
          // that.bandata.LogoSrc = dataUrls[0];
        }
      });
      this.chosenimg = this.themeConfig.background
    },
    computed: {
      ...mapState([
        "pageConfig",
      ]),
      themeConfig() {
        return this.pageConfig[this.pageConfig.theme]
      },
      themeName() {
        return this.pageConfig.theme
      },
      backimg() {
        return 'url(' + this.themeConfig.background + ')'
      },
      tourl() {
        var list = [];
        this.imgList.forEach(function (item) {
          list.push('url(' + item + ')')
        })
        return list;
      }
    },
    methods: {
      ...mapMutations([
        'setThemeConfig',
        'cancelEdit'
      ]),
      changetype: function () {
        if (this.radio == "背景+文字") {
          this.setThemeConfig({
            theme: this.themeName,
            key: 'type',
            value: 1
          })
        } else if (this.radio == "使用图片") {
          this.setThemeConfig({
            theme: this.themeName,
            key: 'type',
            value: 2
          })
        }
      },
      changefc: function () {
        this.setThemeConfig({
          theme: this.themeName,
          key: 'fontcolor',
          value: this.color1
        })
      },
      cancel: function () {
        this.cancelEdit();
      },
      save: function () {
        this.$store.dispatch('save')
      },
      chosebg(bol) {
        this.choseback = bol;
      },
      handlebg(url) {
        this.chosenimg = url;
      },
      submit() {
        this.setThemeConfig({
          theme: this.themeName,
          key: 'background',
          value: this.chosenimg
        })
        this.choseback = false;
      }
    }
  }
</script>

<style scoped lang="less">
  .upimgbox {
    width: 40px;
    height: 40px;
    border: 1px solid #999;
    line-height: 40px;
    margin-bottom: 10px;
  }

  .upimg {
    vertical-align: middle;
    width: 40px;
  }

  .active {
    border: 3px solid #20a0ff;
  }

  .theme {
    width: 280px;
    height: 145px;
    border: 1px solid #999;
    margin: 10px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .logobox {
    margin: 10px 0 15px;
    img {
      height: 37px;
    }
  }

  .callsponsor {
    background: rgba(0, 0, 0, .5);
    transition: width 0.5s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2001;
    .box {
      text-align: left;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff;
      width: 650px;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      background: #fff;
      position: relative;
      p {
        padding: 20px 20px 0;
      }
      .content {
        padding: 20px;
        .icon-box {
          margin: 5px;
          .iconset {
            transition: all .4s;
          }
          .iconset:hover {
            transform: translateY(-2%);
            box-shadow: 1px 4px 10px 2px #CCC;
            -webkit-box-shadow: 1px 4px 10px 2px #CCC;
            -moz-box-shadow: 1px 4px 10px 2px #CCC;
          }
        }
      }
      .bottombox {
        padding: 10px 20px 15px;
        text-align: right;
      }
    }
    .close {
      position: absolute;
      top: 19px;
      right: 20px;
      font-size: 13px;
      color: #999;
    }
  }

  .callsponsor:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  .cover {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 14px;
    text-align: center;
    i {
      font-size: 40px;
      display: block;
      margin: 0;
      margin-top: 20px;
      margin-bottom: 5px;
    }
  }

  .bgimg {
    display: inline-block;
    width: 190px;
    height: 100px;
    border: 1px solid #999;
    margin: 10px 5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
  }

  .note {
    color: #20a0ff;
    margin-bottom: 10px;
  }

  .fade-enter-active,
  .fade-leave-active,
  .move-enter-active,
  .move-leave-active {
    transition: all .4s
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }

  .move-enter,
  .move-leave-to {
    transform: translateY(-20px);
  }
</style>